<template>
  <div class="transfer-wrap" :class="props.class">
    <el-transfer
      v-loading="loading"
      class="basic-transfer mb-2"
      filterable
      :model-value="modelValue"
      :data="data"
      :props="props.props"
      :titles="titles"
      v-bind="$attrs"
      @update:model-value="onTransferModelValueChange"
    >
      <template #left-footer>
        <span class="text-[12px] text-black">待选择</span>
      </template>
      <template #right-footer>
        <span class="text-[12px] text-black">已选择</span>
      </template>
    </el-transfer>
  </div>
</template>

<script setup lang="ts">
import type { TransferKey } from 'element-plus'

interface IEmit {
  (event: 'update:modelValue', val: TransferKey[]): void
}

interface IProps {
  class?: string
  modelValue: TransferKey[]
  data: Record<string, any>[]
  titles?: [string, string]
  loading: boolean
  props?: { key?: string; label?: string; disabled?: string }
}

const emit = defineEmits<IEmit>()
const props = withDefaults(defineProps<IProps>(), {
  titles: () => ['全选', '全选'],
  props: () => ({ key: 'value', label: 'label' })
})

const onTransferModelValueChange = (arr: TransferKey[]) => {
  // console.log(arr)
  emit('update:modelValue', arr)
}
</script>

<style scoped lang="scss">
.transfer-wrap {
  @apply p-4 border border-solid border-[#E8EDFA] rounded;
}
</style>
